<div id="askInfo">
  <div class="thread">
    <div class="thread-header">
      <!--头像-->
      <a class="pull-right js-user-card" :href="'/user/'+ask_info.user.id+'/home'">
        <img class="avatar-sm" src="/static/img/pk.jpg">
      </a>
      <h2 class="thread-title">
        <span class="label label-info">问</span>
        {{ask_info.title}}
      </h2>
      <div class="thread-metas">
        By <a class="link-dark link-primary" :href="'/user/'+ask_info.user.id+'/home'">{{ask_info.user.username}}</a>
        <span class="bullet mhs">•</span>
        <time>{{ask_info.time}}</time>
        <span class="bullet mhs">•</span>
        {{ask_info.looks}}次浏览
        <span class="bullet mhs">•</span>
        <a class="link-primary" :href="'/course/'+ask_info.course.id+'/join/info'"
           :title="ask_info.task ? ask_info.task.name : '默认教学计划'">
          {{ask_info.task ? ask_info.task.name : '默认教学计划'}}
        </a>
      </div>
    </div>
    <div class="thread-body">
      <p>{{ask_info.content}}</p>
    </div>
  </div>

  <div class="thread-posts">
    <h3 class="thread-posts-heading">
      <span class="glyphicon glyphicon-share-alt"></span>
      <span id="thread-post-num">{{totalRows}}</span>
      所有答案
    </h3>
    <ul class="thread-post-list media-list">
      <ask-result-list v-for="(ask_result, index) in ask_results"
                       :index="index" :ask_result="ask_result" :key="ask_result.id"></ask-result-list>
      <nav class="text-center" v-if="page.totalPages>1">
        <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
      </nav>
      <h3 class="text-center" v-if="ask_results.length==0">暂无回答,快来添加吧!</h3>
    </ul>

    <h3 class="thread-posts-heading">
      <span class="glyphicon glyphicon-plus"></span>
      添加答案
    </h3>
    <form id="thread-post-form" class="form-vertical" method="post">
      <div class="form-group">
        <div class="controls">
          <textarea class="form-control" id="content" rows="8" v-model="send_ask.content"></textarea>
        </div>
      </div>

      <div class="form-group">
        <div class="controls clearfix">
          <button type="button" class="btn btn-primary pull-right" @click="publishResult">添加答案</button>
        </div>
      </div>
    </form>

  </div>
</div>

<template id="ask_result_li">
  <li class="thread-post media clearfix">
    <a class="pull-left media-object js-user-card" :href="'/user/'+ask_result.from.id+'/home'">
      <img class="avatar-sm" src="/static/img/pk.jpg">
    </a>
    <div class="thread-post-body media-body" style="word-break:break-all;">
      <div class="media-heading">
        <a href="javascript:">{{ask_result.from.username}}</a>
        <span class="bullet">•</span>
        <span class="color-gray">{{ask_result.time}}</span>
      </div>
      <div class="editor-text">
        <p>
          <a :href="'/user/'+ask_result.to.id+'/home'" v-if="ask_result.to" class="show-user">@{{ask_result.to.username}}</a>
          {{ask_result.content}}
        </p>
      </div>
      <div class="thread-post-action">
        <a href="#thread-post-form" @click="getToId(ask_result.from.id)">回复
        </a>
      </div>
    </div>
  </li>
</template>

<script>
  var askInfoVm = new Vue({
    el: '#askInfo',
    data: {
      wid: infoVm.wid,
      kid: ${kid},
      ask_info: {
        user: {
          username: ''
        },
        looks: '',
        course: {
          id: ''
        }
      },
      ask_results: [],
      page: {
        pageNum: 1,
        totalPages: 1,
        limit: 8
      },
      totalRows: '',
      send_ask: {
        to_id: '0',
        content: ''
      }
    },
    components: {
      'ask-result-list': {
        props: ['ask_results', 'ask_result', 'index'],
        template: '#ask_result_li',
        methods: {
          getToId: function (index) {
            askInfoVm.send_ask.to_id = index;
          }
        }
      }
    },
    created: function () {
      this.getAskInfo();
      this.ask_info.looks++;
      this.getPage();
    },
    watch: {
      'page.pageNum': function (nv) {
        this.getPage();
      }
    },
    methods: {
      gotoPage: function (page) {
        this.page.pageNum = page;
      },
      // 获取问题信息
      getAskInfo: function () {
        var vm = this;
        $.post('/course/ask/api/${kid}/join/getById', {wid: this.wid}, function (data) {
          if(data.success) {
            vm.ask_info = data.payload;
          }
        })
      },
      // 获取问题的所有回复
      getPage: function () {
        var vm = this;
        $.post('/course/ask/api/${kid}/'+infoVm.wid+'/getAllAskResult', {page: this.page.pageNum}, function (data) {
          if (data.success) {
            vm.ask_results = [];
            vm.ask_results = data.payload.rows;
            vm.page.pageNum = data.payload.pageNum;
            vm.page.totalPages = data.payload.totalPages;
            vm.totalRows = data.payload.totalRows;
          }
        })
      },
      // 提交问题
      publishResult: function () {
        var vm = this;
        if (vm.send_ask.content == '') {
          layer.msg('请填写回复内容!', {
            time: 1500
          });
          $('#content').focus();
          return false;
        }
        $.post('/course/ask/api/${kid}/'+vm.wid+'/publishAskResult', {content: vm.send_ask.content, toUserId: vm.send_ask.to_id}, function (data) {
          if (data.success) {
            vm.send_ask.content = '';
            layer.msg('添加成功', {
              time: 1500
            });
            vm.ask_results.push(data.payload);
            if(vm.ask_results.length > vm.page.limit) {
              vm.getPage();
            }
          }
        })
      }
    }

  });
</script>